<template>
  <div class="account-info-page">
    <span class="page-title"
      ><strong>&nbsp;个人账号信息</strong></span
    >
    <!-- 个人信息卡片 -->
    <div class="card user-card">
      <div class="user-card-content">
        <div class="user-info">
          <img
            class="avatar"
            :src="userInfo.user.avatar || defaultAvatar"
            alt="头像"
          />
          <div class="user-meta">
            <div class="user-row">
              <span class="label">姓名：</span>{{ userInfo.user.userName }}
            </div>
            <div class="user-row">
              <span class="label">手机号：</span>{{ userInfo.user.mobile }}
            </div>
            <div class="user-row">
              <span class="label">角色：</span
              >{{ userInfo.roleList?.[0]?.roleName || "-" }}
            </div>
          </div>
        </div>
        <el-button class="edit-btn" type="default" @click="handleEditClick">
          <el-icon><Setting /></el-icon>
          编辑信息
        </el-button>
      </div>
    </div>
    <!-- 权限信息卡片 -->
    <div class="card perm-card">
      <div class="perm-title">权限信息</div>
      <div class="permission-table">
        <table>
          <thead>
            <tr>
              <th>模块</th>
              <th>栏目</th>
              <th>功能权限</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(row, idx) in groupedPermissionTableData"
              :key="row.module + '-' + row.column"
            >
              <td v-if="row.moduleRowspan" :rowspan="row.moduleRowspan">
                {{ row.module }}
              </td>
              <td>{{ row.column }}</td>
              <td>
                <!-- 把权限文本改为带选中效果的显示 -->
                <div class="permission-display">
                  <span
                    v-for="permission in row.permissions"
                    :key="permission"
                    class="permission-item selected"
                  >
                    <el-icon class="permission-icon"><Check /></el-icon>
                    {{ permission }}
                  </span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 编辑信息与修改手机号弹窗并排显示 -->
    <div
      v-if="editDialogVisible || changePhoneDialogVisible"
      class="custom-dialog-row"
    >
      <!-- 信息编辑弹窗内容 -->
      <div v-if="editDialogVisible" class="custom-dialog custom-dialog-left">
        <div class="custom-dialog-header">
          <span class="custom-dialog-title">信息编辑</span>
          <el-icon
            class="custom-dialog-close"
            @click="editDialogVisible = false"
            ><Close
          /></el-icon>
        </div>
        <div class="edit-dialog-content">
          <div class="edit-avatar-row">
            <span class="edit-label">头像：</span>
            <img
              class="edit-avatar"
              :src="editForm.avatar || defaultAvatar"
              alt="头像"
            />
          </div>
          <div class="edit-row">
            <span class="edit-label required">姓名：</span>
            <el-input
              v-model="editForm.userName"
              placeholder="请输入姓名"
              style="width: 200px"
            />
          </div>
          <div class="edit-row">
            <span class="edit-label">角色：</span>
            {{ userInfo.roleList?.[0]?.roleName || "-" }}
          </div>
          <div class="edit-row">
            <span class="edit-label required">手机号：</span>
            {{ userInfo.user.mobile }}
            <el-link
              type="primary"
              style="margin-left: 24px"
              @click="handleChangePhone"
              >修改手机号</el-link
            >
          </div>
        </div>
        <div class="custom-dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveEdit" :loading="saving"
            >保存</el-button
          >
        </div>
      </div>
      <!-- 修改手机号弹窗内容 -->
      <div
        v-if="changePhoneDialogVisible"
        class="custom-dialog custom-dialog-right"
      >
        <div class="custom-dialog-header">
          <span class="custom-dialog-title">修改手机号</span>
          <el-icon class="custom-dialog-close" @click="handleCancelChangePhone"
            ><Close
          /></el-icon>
        </div>
        <!-- 个人信息区 -->
        <div class="edit-dialog-content" style="margin-bottom: 18px">
          <div class="edit-avatar-row">
            <span class="edit-label">头像：</span>
            <img
              class="edit-avatar"
              :src="userInfo.user.avatar || defaultAvatar"
              alt="头像"
            />
          </div>
          <div class="edit-row">
            <span class="edit-label required">姓名：</span>
            {{ userInfo.user.userName }}
          </div>
          <div class="edit-row">
            <span class="edit-label">角色：</span>
            {{ userInfo.roleList?.[0]?.roleName || "-" }}
          </div>
        </div>
        <!-- 修改手机号表单 -->
        <el-form
          ref="phoneFormRef"
          :model="phoneForm"
          :rules="phoneRules"
          class="phone-vertical-form"
        >
          <div class="edit-row">
            <span class="edit-label required">原手机号：</span>
            <el-form-item prop="oldMobile">
              <el-input
                v-model="phoneForm.oldMobile"
                disabled
                placeholder="请输入原绑定手机号"
              />
            </el-form-item>
          </div>
          <div class="edit-row">
            <span class="edit-label required">验证码：</span>
            <el-form-item prop="oldMobileCode">
              <el-input
                v-model="phoneForm.oldMobileCode"
                placeholder="请输入验证码"
                style="width: 200px; margin-right: 12px"
              />
            </el-form-item>
            <el-button
              class="code-btn"
              type="primary"
              :disabled="oldMobileCodeTimer > 0"
              @click="handleSendCode('old')"
            >
              {{
                oldMobileCodeTimer > 0 ? `${oldMobileCodeTimer}s` : "获取验证码"
              }}
            </el-button>
          </div>
          <div class="edit-row">
            <span class="edit-label required">新手机号：</span>
            <el-form-item prop="newMobile">
              <el-input
                v-model="phoneForm.newMobile"
                placeholder="请输入新绑定手机号"
              />
            </el-form-item>
          </div>
          <div class="edit-row">
            <span class="edit-label required">验证码：</span>
            <el-form-item prop="newMobileCode">
              <el-input
                v-model="phoneForm.newMobileCode"
                placeholder="请输入验证码"
                style="width: 200px; margin-right: 12px"
              />
            </el-form-item>
            <el-button
              class="code-btn"
              type="primary"
              :disabled="newMobileCodeTimer > 0 || !phoneForm.newMobile"
              @click="handleSendCode('new')"
            >
              {{
                newMobileCodeTimer > 0 ? `${newMobileCodeTimer}s` : "获取验证码"
              }}
            </el-button>
          </div>
        </el-form>
        <div class="custom-dialog-footer">
          <el-button @click="handleCancelChangePhone">取消</el-button>
          <el-button
            type="primary"
            @click="handleSavePhone"
            :loading="savingPhone"
            >保存</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="PersonalAccountInfo">
import { ref, onMounted, reactive, computed, nextTick, watch } from "vue";
import { ElMessage } from "element-plus";
import {
  getLoginUserInfo,
  editLoginUserInfo,
} from "@/api/AccountPermissionManagement";
import { sendSms } from "@/api/login";
import type { UserInfo, RoleInUser, PermissionInfo } from "@/api/model/model";
import { Setting, Close, Check } from "@element-plus/icons-vue";

const defaultAvatar =
  "https://img1.baidu.com/it/u=1618864032,2189629152&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200";

// 用户信息
const userInfo = ref<{
  user: UserInfo;
  roleList: RoleInUser[];
  permissionList: PermissionInfo[];
}>({
  user: {
    id: 0,
    userType: "",
    mobile: "",
    userName: "",
    nickname: "",
    avatar: null,
    status: "",
    createdAt: "",
    updatedAt: null,
    deletedAt: null,
  },
  roleList: [],
  permissionList: [],
});

// 编辑表单
const editForm = reactive({
  userName: "",
  avatar: "",
});

// 修改手机号表单
const phoneForm = reactive({
  oldMobile: "",
  oldMobileCode: "",
  newMobile: "",
  newMobileCode: "",
});

// 手机号验证规则
const phoneRules = {
  oldMobile: [
    { required: true, message: "请输入原手机号", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号",
      trigger: "blur",
    },
  ],
  oldMobileCode: [
    { required: true, message: "请输入验证码", trigger: "blur" },
    { pattern: /^\d{6}$/, message: "验证码为6位数字", trigger: "blur" },
  ],
  newMobile: [
    { required: true, message: "请输入新手机号", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号",
      trigger: "blur",
    },
  ],
  newMobileCode: [
    { required: true, message: "请输入验证码", trigger: "blur" },
    { pattern: /^\d{6}$/, message: "验证码为6位数字", trigger: "blur" },
  ],
};

// 弹窗控制
const editDialogVisible = ref(false);
const changePhoneDialogVisible = ref(false);

// 表单引用
const phoneFormRef = ref();

// 加载状态
const saving = ref(false);
const savingPhone = ref(false);

// 验证码倒计时
const oldMobileCodeTimer = ref(0);
const newMobileCodeTimer = ref(0);

// 表单重置方法
const resetPhoneForm = () => {
  phoneForm.oldMobile = "";
  phoneForm.oldMobileCode = "";
  phoneForm.newMobile = "";
  phoneForm.newMobileCode = "";
  // 清除表单校验状态
  nextTick(() => {
    phoneFormRef.value?.clearValidate();
  });
};



// 权限code与名称映射表
const permissionCodeMap = {
  "0201": "待办开票申请审核查看",
  "0202": "待办开票申请审核处理",
  "0301": "待办投诉举报查看",
  "0302": "待办投诉举报处理",
  "0401": "待办意见反馈查看",
  "0402": "待办意见反馈处理",
  "0501": "工具启用",
  "0502": "工具查看",
  "0503": "工具禁用",
  "0601": "活动查看",
  "0602": "活动创建",
  "0603": "活动编辑",
  "0604": "活动删除",
  "0701": "企业查看",
  "0702": "企业删除",
  "0703": "企业编辑",
  "0704": "企业禁用",
  "0705": "企业启用",
  "0801": "用户查看",
  "0901": "资金明细查看",
  "1001": "发票查看",
  "1002": "待开票发票处理",
  "1101": "活动管理员考核查看",
  "1102": "客服专员考核查看",
  "1201": "查看个人账号信息",
  "1202": "编辑个人账号信息",
  "1203": "查看账号权限",
  "1204": "编辑账号权限",
  "1301": "查看登录日志",
  "1302": "查看操作日志",
  "1401": "意见反馈查看",
  "1402": "意见反馈处理",
};

// 权限code前两位映射模块和栏目
const codeModuleColumnMap = {
  "01": { module: "控制台", column: "控制台" },
  "02": { module: "待办中心", column: "开票申请审核" },
  "03": { module: "待办中心", column: "投诉举报" },
  "04": { module: "待办中心", column: "意见反馈" },
  "05": { module: "营销工具", column: "工具" },
  "06": { module: "活动管理", column: "活动" },
  "07": { module: "企业管理", column: "全部企业" },
  "08": { module: "用户管理", column: "全部用户" },
  "09": { module: "资金明细", column: "全部资金" },
  "10": { module: "发票管理", column: "全部发票" },
  "11": { module: "平台管理", column: "活动管理员管理" },
  "12": { module: "账号中心", column: "账号管理" },
  "13": { module: "记录中心", column: "登录日志" },
  "14": { module: "意见反馈", column: "全部反馈" },
};

function getModuleAndColumnByCode(code: string) {
  const prefix = code.slice(0, 2);
  let { module, column } = (
    codeModuleColumnMap as Record<string, { module: string; column: string }>
  )[prefix] || {
    module: "未知模块",
    column: "未知栏目",
  };
  // 针对特殊栏目细分
  if (prefix === "12" && code === "1203") column = "权限管理";
  if (prefix === "13" && code === "1302") column = "操作日志";
  if (prefix === "11" && code === "1102") column = "客服专员管理";
  return { module, column };
}

// 动态生成权限表格数据（分组并加rowspan）
const groupedPermissionTableData = computed(() => {
  const map = new Map<
    string,
    { module: string; column: string; permissions: string[] }[]
  >();
  (userInfo.value.permissionList || []).forEach((p) => {
    const { module, column } = getModuleAndColumnByCode(p.permissionCode);
    const key = module;
    if (!map.has(key)) {
      map.set(key, []);
    }
    // 查找是否已存在同栏目
    let found = map.get(key)!.find((item) => item.column === column);
    if (!found) {
      map.get(key)!.push({ module, column, permissions: [] });
      found = map.get(key)!.find((item) => item.column === column);
    }
    found!.permissions.push(
      (permissionCodeMap as Record<string, string>)[p.permissionCode] ||
        p.permissionCode
    );
  });
  // 展平成表格数据，带rowspan
  const result: Array<any> = [];
  map.forEach((rows, module) => {
    rows.forEach((row, idx) => {
      result.push({
        module,
        column: row.column,
        permissions: row.permissions, // 保持为数组，用于渲染
        permission: row.permissions.join("，"), // 保留原字段用于兼容
        moduleRowspan: idx === 0 ? rows.length : 0,
      });
    });
  });
  return result;
});

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const response = await getLoginUserInfo();
    console.log("完整的接口响应:", response);

    const responseData = response.data;
    console.log("接口返回数据:", responseData);

    if (responseData?.code === "100" && responseData?.data) {
      const userData = responseData.data;
      console.log("用户数据:", userData);

      // 更新用户信息
      userInfo.value = {
        user: {
          ...userData.user,
          avatar: userData.user?.avatar || defaultAvatar,
          createdAt: userData.user?.createdAt || "",
          updatedAt: userData.user?.updatedAt || null,
          deletedAt: userData.user?.deletedAt || null,
        },
        roleList: userData.roleList || [],
        permissionList: userData.permissionList || [],
      };

      // 更新编辑表单
      editForm.userName = userData.user?.userName || "";
      editForm.avatar = userData.user?.avatar || defaultAvatar;
    } else {
      console.warn("接口返回错误:", {
        code: responseData?.code,
        message: responseData?.message,
        data: responseData?.data,
      });
      ElMessage.warning(responseData?.message || "获取用户信息失败");
      resetUserInfo();
    }
  } catch (error: unknown) {
    console.error("获取用户信息失败:", {
      error,
      response: (error as any)?.response?.data,
      message: (error as any)?.message,
      stack: (error as any)?.stack,
    });
    ElMessage.error(
      (
        error as {
          response?: { data?: { message?: string } };
          message?: string;
        }
      )?.response?.data?.message ||
        (error as { message?: string })?.message ||
        "获取用户信息失败"
    );
    resetUserInfo();
  }
};

// 重置用户信息
const resetUserInfo = () => {
  userInfo.value = {
    user: {
      id: 0,
      userType: "",
      mobile: "",
      userName: "",
      nickname: "",
      avatar: defaultAvatar as string | null,
      status: "",
      createdAt: "",
      updatedAt: null,
      deletedAt: null,
    },
    roleList: [],
    permissionList: [],
  };
};

// 点击编辑按钮
const handleEditClick = () => {
  // 重新初始化编辑表单
  editForm.userName = userInfo.value.user.userName;
  editForm.avatar = userInfo.value.user.avatar || defaultAvatar;
  editDialogVisible.value = true;
};

// 保存编辑
const handleSaveEdit = async () => {
  if (!editForm.userName.trim()) {
    ElMessage.warning("请输入姓名");
    return;
  }

  saving.value = true;
  try {
    const params = {
      userName: editForm.userName.trim(),
      avatar: editForm.avatar || defaultAvatar,
    };

    const response = await editLoginUserInfo(params);
    console.log("保存编辑响应:", response);

    if (response.data?.code === "100") {
      ElMessage.success("保存成功");
      editDialogVisible.value = false;
      // 重新获取用户信息
      await fetchUserInfo();
    } else {
      ElMessage.warning(response.data?.message || "保存失败");
    }
  } catch (error: unknown) {
    console.error("保存失败:", error);
    ElMessage.error(
      (
        error as {
          response?: { data?: { message?: string } };
          message?: string;
        }
      )?.response?.data?.message || "保存失败"
    );
  } finally {
    saving.value = false;
  }
};

// 点击修改手机号
const handleChangePhone = () => {
  phoneForm.oldMobile = userInfo.value.user.mobile;
  phoneForm.newMobile = "";
  phoneForm.oldMobileCode = "";
  phoneForm.newMobileCode = "";
  changePhoneDialogVisible.value = true;
};

// 发送验证码
const handleSendCode = async (type: "old" | "new") => {
  const mobile = type === "old" ? phoneForm.oldMobile : phoneForm.newMobile;
  if (!mobile || !/^1[3-9]\d{9}$/.test(mobile)) {
    ElMessage.warning("请输入正确的手机号");
    return;
  }

  try {
    await sendSms({ mobile });
    ElMessage.success("验证码发送成功");
    // 开始倒计时
    const timer = type === "old" ? oldMobileCodeTimer : newMobileCodeTimer;
    timer.value = 60;
    const interval = setInterval(() => {
      timer.value--;
      if (timer.value <= 0) {
        clearInterval(interval);
      }
    }, 1000);
  } catch (error) {
    console.error("发送验证码失败:", error);
    ElMessage.error("发送验证码失败");
  }
};

// 取消修改手机号
const handleCancelChangePhone = () => {
  changePhoneDialogVisible.value = false;
};

// 保存新手机号
const handleSavePhone = async () => {
  if (!phoneFormRef.value) return;
  
  try {
    await phoneFormRef.value.validate();
    
    savingPhone.value = true;
    const params = {
      userName: userInfo.value.user.userName,
      oldMobile: phoneForm.oldMobile,
      oldMobileCode: phoneForm.oldMobileCode,
      newMobile: phoneForm.newMobile,
      newMobileCode: phoneForm.newMobileCode,
    };

    const { data: response } = await editLoginUserInfo(params);
    console.log("保存手机号响应:", response);

    if (response.code === "100") {
      ElMessage.success("手机号修改成功");
      changePhoneDialogVisible.value = false;
      // 重新获取用户信息
      await fetchUserInfo();
    } else {
      ElMessage.warning(response.message || "修改失败");
    }
  } catch (error: unknown) {
    if (error !== false) { // 表单校验失败时error为false
      console.error("修改手机号失败:", error);
      ElMessage.error("修改手机号失败");
    }
  } finally {
    savingPhone.value = false;
  }
};

// 页面加载时获取用户信息
onMounted(() => {
  fetchUserInfo();
});
</script>

<style scoped>
.account-info-page {
  background: #f5f6fa;
  min-height: 100vh;
  margin: 32px 0 0 0;
  padding: 32px 24px 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-title {
  font-size: 20px;
  margin-bottom: 24px;
  color: #222;
  text-align: left;
  display: block;
  width: 100%;
  margin-left: 0;
  margin-top: 0;
  padding-top: 0;
  position: relative;
  top: -32px;
}

.card, .user-card, .perm-card {
  width: 90%;
  margin: 0 auto 32px auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s;
  position: relative;
  top: -32px;
}

@media (max-width: 1400px) {
  .card, .user-card, .perm-card {
    max-width: none;
  }
}

.user-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  margin-bottom: 24px;
  min-height: 200px;
  padding: 48px 48px 32px 48px;
}

.user-card-title {
  font-size: 20px;
  font-weight: bold;
  color: #222;
  margin-bottom: 18px;
}

.user-card-content {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  min-height: 120px;
}

.user-info {
  margin-top: 0;
  display: flex;
  align-items: center;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  object-fit: cover;
  margin-right: 32px;
  border: 1px solid #e6e6e6;
}

.user-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.user-row {
  font-size: 17px;
  color: #222;
}

.label {
  color: #888;
  margin-right: 4px;
}

.edit-btn {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
}

.edit-btn :deep(.el-icon) {
  font-size: 16px;
}

.perm-card {
  margin-top: 0;
  min-height: 300px;
  padding: 40px 48px 32px 48px;
}

.perm-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 18px;
  color: #222;
}

.permission-table {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.02);
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

th {
  background: #fafafa;
  padding: 16px;
  text-align: left;
  font-weight: normal;
  color: #333;
  border-bottom: 1px solid #ebeef5;
}

td {
  padding: 16px;
  border-bottom: 1px solid #ebeef5;
  color: #666;
  line-height: 1.5;
  background: #fff;
}

.module-cell {
  background: #fff;
  vertical-align: top;
  border-right: 1px solid #ebeef5;
}

td:nth-child(2) {
  border-right: 1px solid #ebeef5;
}

/* 表头样式 */
thead tr th {
  background: #fafafa;
  border-bottom: 1px solid #ebeef5;
}

thead tr th:not(:last-child) {
  border-right: 1px solid #ebeef5;
}

/* 圆角处理 */
thead tr:first-child th:first-child {
  border-top-left-radius: 4px;
}

thead tr:first-child th:last-child {
  border-top-right-radius: 4px;
}

tbody tr:last-child td:first-child {
  border-bottom-left-radius: 4px;
}

tbody tr:last-child td:last-child {
  border-bottom-right-radius: 4px;
}

/* 去掉最后一行的底部边框 */
tbody tr:last-child td {
  border-bottom: none;
}

/* 列宽设置 */
th:nth-child(1),
td:nth-child(1) {
  width: 15%;
}

th:nth-child(2),
td:nth-child(2) {
  width: 20%;
}

th:nth-child(3),
td:nth-child(3) {
  width: 65%;
}

.edit-dialog-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-top: 10px;
  width: 100%;
}

.edit-avatar-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.edit-avatar {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  object-fit: cover;
  margin-left: 12px;
  border: 1px solid #e6e6e6;
}

.edit-row {
  font-size: 16px;
  color: #222;
  display: flex;
  align-items: center;
}

.edit-label {
  color: #888;
  margin-right: 4px;
  min-width: 60px;
  display: inline-block;
}

.required {
  color: #f56c6c;
}

.phone-form {
  padding: 20px 40px;
}

.phone-form :deep(.el-form-item) {
  margin-bottom: 24px;
  position: relative;
}

.phone-form :deep(.el-input) {
  width: 240px;
}

.phone-form :deep(.code-btn) {
  position: absolute;
  right: 0;
  top: 0;
  width: 120px;
}

.phone-form :deep(.el-form-item__label) {
  font-weight: normal;
  color: #606266;
}

.phone-form :deep(.el-input__inner) {
  height: 40px;
  line-height: 40px;
}

.phone-form :deep(.el-button) {
  height: 40px;
}

.phone-form :deep(.required) {
  color: #f56c6c;
}

.custom-dialog-row {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 3000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: rgba(0, 0, 0, 0.08);
  padding-top: 60px;
}
.custom-dialog {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  min-width: 480px;
  max-width: 600px;
  margin: 0 32px;
  padding: 32px 36px 24px 36px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.custom-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.custom-dialog-title {
  font-size: 20px;
  font-weight: bold;
  color: #222;
}
.custom-dialog-close {
  font-size: 20px;
  cursor: pointer;
}
.custom-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 32px;
}
.phone-vertical-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 10px;
}
.edit-row {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}
.edit-label {
  color: #888;
  margin-right: 4px;
  min-width: 90px;
  display: inline-block;
}
.required {
  color: #f56c6c;
}
.code-btn {
  min-width: 100px;
  height: 40px;
}

.permission-display {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.permission-item {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background: #e6f7ff;
  border: 1px solid #91d5ff;
  border-radius: 4px;
  color: #1890ff;
  font-size: 12px;
}

.permission-item.selected {
  background: #e6f7ff;
  border-color: #91d5ff;
  color: #1890ff;
}

.permission-icon {
  margin-right: 4px;
  font-size: 12px;
}
</style>
